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Bootstrap navigation bar without 
JavaScript 


Bootstrap is distributed with a JavaScript file called bootstrap. js which 
requires jQuery. This file allows, among other things, making the navigation 
bar work when there are dropdown menus, and toggle the navigation links, 


which are hidden in low-resolution screens. 


The problem is that Bootstrap doesn't offer the same basic functionality wit- 
hout JavaScript. Namely, if you don't have JavaScript enabled, you cannot 
access the dropdown menu nor toggle the navigation menu in mobile or 
low-resolution devices. However, its possible to offer this features without 


JavaScritp. In this article I show you how to do it. 


First, we are going to create a navigation bar which works with JavaScript. 


used 1s the 3.3.7. 


<!DOCTYPE html> 
«html lLang="e5"> 
<head> 
<meta charset="UTF-5"> 
<meta name="vViewport" content="width=device-width"> 
“titleshith JavaScript | Bootstrap navigation bar</title> 
<Link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<script src="https://www. Treakspot.net/theme/]s/jquery-3.1.1.min.]s"></ 
<script src="js5/bootstrap.]s"></script> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
<div class="navbar-header"> 
<a href="https://www.freakspot.net/" class="navbar-brand">Freak 5| 
<button aria-expanded="false" class="navbar-toggle" type="button" 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar'"></span> 
</button> 
</div> 
<div class="navbar-collapse collapse" 1d="navbar-main"> 
<ul class="nav navbar-nav"> 








“liz 
<a href="#">Another section</a> 
</li> 
“liz 
<a href="https://es.wikipedia.org/wik1/wWikipedia: Portada">W1ik: 
</li> 
“li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id 
<ul class="dropdown-menu" aria-labelledby="themes"> 
<li><a href="https://www.fst.org/">FSF</a></11> 
<li><a href="https://www.gnu.org/">GNU</a></11> 
<li><a href="https://peers.community/">Peers Community</a><, 
</ul> 
</li> 
</ul> 
</div> 
</div> 
</nav> 
</body> 
</html> 


You can find out how this example works. When you press on the togglable 


menu called "Free Software", other options appear below; when the resolu- 


tion is small, you just have to press a button to toggle the navigation menu. 


But these two functionalities don't work when JavaScript is disabled. 


The changes we must do are the following, the removed lines start with - 
and the new ones with +, (output obtained with the command diff -u 


with-javascript. html without-javascript.html): 


- vith-javascript.html 2017-09-16 15:02:54. 167637691 +0200 
+++ without-javascript.html 2017-09-22 11:32:11.008899729 +0200 
Ga -3,21 +3,37 Go 
<head> 
“meta charset="UTF-8"> 
<meta name="Viewport" content="width=device-width"> 
<title=with JavaScript | Bootstrap navigation bar</title> 
etitleshithout JavaScript | Barra de navegación de Bootstrap</title> 
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<script src="https://www. freakspot.net/theme/js/jquery-3.1.1.min.j]s">< 
<script src="js/bootstrap.js"></script> 
<style> 
.dropdown:hover > .dropdown-menu { 
display: block; 


label [for=navbar-toggle-cbox] { 
display: none; 


+++ 4444 4 4+ 


</style> 
</head> 
<body> 
«nav class="navbar navbar-default navbar-Tfixed-top"> 
<div class="container"> 
“input aria-controls="navbar-main" id="navbar-toggle-cbox" role="bi 
<div class="navbar-header"> 
<a href="https://www.freakspot.net/" class="navbar-brand">Freak ! 





<button aria-expanded="Talse" class="navbar-toggle" type="button 
“label class="navbar-toggle collapsed" for="navbar-toggle-cbox"> 
<span class="icon-bar"></span> 
espan class="1con-bar"></span> 
“span class="icon-bar"></span> 
efbuttonz 
eflabelz 
</div> 
<div class="navbar-coLllapse collapse" id="navbar-main"> 
sul class="nav navbar-nav"> 


The complete source code is shown below. 


<!DOCTYPE html> 
<html Lang="en'"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width"> 
“titleshithout JavaScript | Barra de navegación de Bootstrap</title> 
elink rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<style> 
.dropdown:hover > .dropdown-menu { 
display: block; 


LabeL[ Tor=navbar-toggle-cbox] { 
cursor: pointer; 


1 


#navbar-toggle-cbox: checked ~ .collapse { 
display: block; 
} 


#navbar-toggle-cbox { 
display: none; 
} 
</style> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-Tixed-top"> 
<div class="container"> 
<input aria-controls="navbar-main" id="navbar-toggle-cbox" role="bu 
<div class="navbar-header"> 
<a href="https://www.Treakspot.net/" class="navbar-brand">Freak 5 
“label class="navbar-toggle collapsed" for="navbar-toggle-cbox"> 
“span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</label> 
</div> 
<div class="navbar-collapse collapse" 1d="navbar-main"> 
<ul class="nav navbar-nav"> 
<li> 
sa href="#">Another Section</a> 
</li> 
<li> 
<a href="https://en.wikipedia.org/wiki/Main Page">Wikipedia</ 
</li> 
<li class="cropdown'> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id 
sul class="cropdown-menu" arila-labelledby="themes"> 
<li><a href="https://www.fst.org/">FSF</a></11> 





<li><a href="https://www.gnu.org/">GNU</a></11> 
<li><a href="hitps://peers.community/">Peers Community</a><, 
</ul> 
</li> 
</ul> 
</div> 
</div> 
</nav> 
</body> 
</html> 


You can find out how this example works. Now, pressing on "Free Software" 
is not necessary, you can simply hover it with the mouse. The button for tog- 
gling the links in smaller resolution has been replaced in the version without 
JavaScript with a hidden checkbox. The checkbox Is activated pressing the 
<Label> element that is associated with it (Tor="navbar-toggle- 


cbox"). When the checkbox is active, the links of the navigation menu are 


Unlike the JavaScript version, the version without JavaScript doesn't have an 
animation when you toggle the navigation menu. It's impossible to change 
the value of the attribute arla-expanded (which should change to true 
when the menu is shown), so it must be removed. Furthermore, maybe It's 
not enough to use the pseudoelement : hover. In my opinion, the best 


thing is to avoid using a dropdown menu in the navigation bar. 


To sum up, if we are using other features offered by the file bootstrap.js 


or we don't want to lose any functionality, there is no point in removing it. 


l is include the code we ad- 


What we must do to make it work for everyone 


ded to the version without JavaScript inside the <noscript> tag, so that 
the website works for people who enable JavaScript and people who don't. 
To hide the button needed for the JavaScript version when JavaScript is disa- 
bled, we can assign an 1d to the button and give it the value display: 


none. The solution is shown below. 


<!IDOCTYPE html> 
<html Lang="en"> 
<head> 

“meta charset="UTF-8"> 
<meta name="Viewport" content="width=device-width"> 
<title=with JavaScript and without JavaScript | Bootstrap navigation ba 
<Link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<script src="https: //www. Treakspot.net/theme/j]s/jquery-3.1.1.min.]s"></ 
<script src="js/bootstrap.js"></script> 





<style> 
#navbar-toggle-cbox { 
display: none; 


</style> 
<noscript> 
<style> 
.dropdown:hover > .dropdown-menu { 
display: block; 
} 


label [Tor=navbar-toggle-cbox] 1 
cursor: pointer; 


} 


#navbar-toggle-cbox:checked ~ .collapse { 
display: block; 


#toggle-navbar { 
display: none; 


</style> 
</noscript> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-Tixed-top"> 
<div class="container"> 
<input aria-controls="navbar-main" 1d="navbar-toggle-cbox" role="bu 
<div class="navbar-header"> 
<a href="https://www.Tfreakspot.net/" class="navbar-brand">Freak 5| 
<noscript> 
“label class="navbar-toggle" for="navbar-toggle-cbox"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</Label> 
</noscript> 
“button arla-expanded="false" class="navbar-toggle" 1id="toggle-na 
“span class="icon-bar'"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
</div> 
<div class="navbar-collapse collapse" id="navbar-main"> 
<ul class="nav navbar-nav"> 
<li> 
<a href="#">Another Section</a> 
</li> 
dl a 
<a href="https://en.wikipedia.org/wiki/Main Page">Wikipedia</ 
</li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id 
<UL class="dropdown-menu" aria-labelledby="themes"> 
<li><a href="https://www.fst.org/">FSF</a></1i> 
<li><a href="hitps://www.gnu.org/">GNU</a></ li> 
<li><a href="hittps://peers.community/">Peers Community</a><, 
</ul> 
«f li> 
</ul> 
</div> 
</div> 
</nav> 
</body> 
</html> 








You can find out how this example works. The differences between the ver- 


sion with JavaScript and this solution are the following: 


- vith-javascript.html 2017-09-16 15:02:54. 1167637691 +0200 
+++ vith-and-vithout-js.htmi 2017-69-22 11:32:31. 2716762097 +0200 
@ü -3,17 +3,49 og 
<head> 
<meta charset="UTF-8"> 
“meta name="viewport" content="width=device-width"> 
<title=with JavaScript | Bootstrap navigation bar</title> 
etitleshvith JavaScript and without JavaScript | Bootstrap navigation bi 
<Link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
<script src="https://www. freakspot.net/theme/js/jquery-3.1.1.min.js"><, 
<script src="js/bootstrap.]s"></script> 
<style> 
#navbar-toggle-cbox { 
display: none; 
} 


</style> 
<noscript> 
<style> 
.dropdown:hover > .dropdown-menu { 
display: block; 


label [for=navbar-toggle-cbox] { 
cursor: pointer; 


} 


#navbar-toggle-cbox:checked ~ .collapse { 
display: block; 
} 


#toggle-navbar { 
display: none; 


</style> 
</noscript> 
</head> 
<body> 
nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
<input aria-controls="navbar-main" id="navbar-toggle-cbox" role="bi 
<div class="navbar-header"> 
<a hret="https://www.  Treakspot.net/" class="navbar-brand">Freak | 
<button aria-expanded="Talse" class="navbar-toggle" type="button 
<noscript> 
“label class="navbar-toggle" Tor="navbar-toggle-cbox"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</Label> 
</noscript>= 
<button aria-expanded="Talse" class="navbar-toggle" id="toggle-ni 
“span class="1con-bar"></span> 
<span class="1con-bar"></span> 
<span class="1con-bar"></span> 
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1. Obviously, the ones who disable JavaScript will have less features, but the 


website will be usable. — 





